<script>
import {
  groupByAdmainAPI,
  deleteGRroupAPI,
  addGroupAPI
} from "../../api/GroupAPI.js";

export default {
  name: "Group",
  data() {
    return {
      GroupData: [],
      userInfo: {},
      groupInfo: {},
      dialogVisible: false
    };
  },

  async created() {
    await this.auth();
    await this.getGroup();
  },
  methods: {
    async getGroup() {
      var res = await groupByAdmainAPI(this.userInfo.id);

      this.GroupData = res.data.data ? res.data.data.groupBuyings : [];
    },
    async handleEdit(index, row) {
      await deleteGRroupAPI(row.groupId);
      this.$message({
        message: "恭喜你，删除成功",
        type: "success"
      });
      await this.getGroup();
    },
    // Token 检验 ,取得用户信息
    async auth() {
      const { data } = await this.$axios.get("/user/auth");
      if (data.code !== 200) {
        // Token校验异常
        this.$router.push("/");
      } else {
        this.userInfo = data.data;
        this.userAvatar = data.data.userAvatar;
      }
    },
    async addGroup() {
      this.groupInfo.groupUser = this.userInfo.id;
      await addGroupAPI(this.groupInfo);
      this.$message({
        message: "恭喜你，添加成功",
        type: "success"
      });
      await this.getGroup();
    },
    handleAvatarSuccess(res, file) {
      if (res.code !== 200) {
        this.$message.error(`头像上传异常`);
        return;
      }
      this.$message.success(`头像上传成功`);
      this.userInfo.url = res.data;
    }
  }
};
</script>
<template>
  <div style="position: relative;">
    <el-button
      size="small"
      style="background-color: rgb(96, 98, 102);color: rgb(247,248,249);border: none;position: absolute;z-index: 10;right: 10px;top: 10px;"
      class="customer"
      type="info"
      @click="dialogVisible = true"
      ><i class="el-icon-plus"></i>新建拼团</el-button
    >
    <el-dialog
      title="提示"
      center
      :visible.sync="dialogVisible"
      width="300"
      style="margin: 10px 0;"
    >
      <el-form
        label-position="right"
        label-width="200px"
        :model="groupInfo"
        style="margin: 30px 0;"
      >
        <el-form-item label="地点">
          <el-input v-model="groupInfo.groupAddre"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-row>
            <el-upload
              class="avatar-uploader"
              action="/api/online-travel-sys/v1.0/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img
                v-if="userInfo.url"
                :src="userInfo.url"
                style="width: 80px;height: 80px;"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-row>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="groupInfo.groupPrice"></el-input>
        </el-form-item>
        <el-form-item label="人数">
          <el-input v-model="groupInfo.groupSum"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="groupInfo.groupPhone"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="groupInfo.groupText"></el-input>
        </el-form-item>
        <el-form-item label="出发日期">
          <el-input v-model="groupInfo.groupTime"></el-input>
        </el-form-item>
        <el-form-item label="天数">
          <el-input v-model="groupInfo.groupDay"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGroup">确 定</el-button>
      </span>
    </el-dialog>
    <el-table ref="filterTable" :data="GroupData" style="width: 100%">
      <el-table-column label="旅游地点" width="90" style="text-align: center;">
        <template slot-scope="scope">
          <i class="el-icon-location-information"></i>
          <span style="margin-left: 10px">{{ scope.row.groupAddre }}</span>
        </template>
      </el-table-column>

      <el-table-column label="地点图像" width="100" center>
        <template slot-scope="scope">
          <img
            :src="scope.row.groupImg"
            alt=""
            style="width: 100px; object-fit: cover;"
          />
        </template>
      </el-table-column>
      <el-table-column label="景点描述" width="180">
        <template slot-scope="scope">
          <i class="el-icon-chat-line-round"></i>
          <span style="margin-left: 10px">{{ scope.row.groupText }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开团日期日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.groupTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开团人数" width="90">
        <template slot-scope="scope">
          <i class="el-icon-user-solid"></i>
          <span style="margin-left: 10px">{{ scope.row.groupSum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="现人数" width="80">
        <template slot-scope="scope">
          <i class="el-icon-user-solid"></i>
          <span style="margin-left: 10px">{{ scope.row.groupUsum }}</span>
        </template>
      </el-table-column>

      <el-table-column label="联系方式" width="120">
        <template slot-scope="scope">
          <i class="el-icon-phone"></i>
          <span style="margin-left: 10px">{{ scope.row.groupPhone }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发布价格" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">￥{{ scope.row.groupPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="天数" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.groupDay }}天</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tag
            type="success"
            @click="handleEdit(scope.$index, scope.row)"
            style="cursor: pointer;"
            >删除拼团</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 500px;
  margin: 0 auto;
}
</style>
